<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文件管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" class="user-search">
      <el-form-item label="">
        <el-input size="small" v-model="searchFileName" placeholder="文件名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-button  size="small" @click="initFileData()">查询</el-button>
      </el-form-item>
      <el-form-item label="" style="text-align: right">
        <el-tag class="tag-item tag-width" style="cursor:pointer;" type="primary" @click="handleUpFile()">上传文件</el-tag>
        <el-dialog title="上传" :visible.sync="dialogFileUploadVisible" class="file_dialog" width="30%">
          <el-upload ref="dataFormFile"
                     :multiple="false"
                     :limit="1"
                     :data="fileUpData"
                     :auto-upload="false"
                     :action="upload_file_url"
                     :on-success="fileUpSuccess"
                     :on-error="fileUpError">
            <el-button type="success">选择文件</el-button>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFileUploadVisible = false">取消</el-button>
            <el-button type="primary" @click="fileUpload()">上传</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>

    <!--文件列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
              element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column sortable prop="id" label="文件id" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="fileName" label="文件名称" width="220" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="contextType" label="文件类型" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column sortable prop="uploadStatus" label="上传状态" width="120" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="downLoad(scope.row)">下载</el-button>
          <el-button size="mini" @click="deleteUserFile(scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>
<script>

import {deleteFile, getFieDownloadUrl, getFileList, updateFileInfo} from "../../api/basisMG";
import {getStore} from "../../utils/util";

export default {
  data() {
    return {
      // 上传文件参数
      fileUpData: {accessToken: getStore('accessToken'), fileSourceType: 'MINIO'}, // 文件上传附带参数
      fileUpList: [], // 上传的文件列表
      dialogFileUploadVisible: false,
      upload_file_url: '/file-service/file/upload', // 文件上传地
      searchFileName: '',
      listData: [
        {
          id: null,
          fileName: '测试文件',
          contextType: '',
          uploadStatus: ''
        }
      ]
    };
  },
  created() {
    this.initFileData()
  },
  methods: {

    /**
     * 文件上传弹窗显示
     */
    handleUpFile() {

      this.dialogFileUploadVisible = true
    },

    /**
     * 文件上传成功时的钩子
     */
    fileUpSuccess(res, file, fileList) {

      console.log('文件上传成功', res)
      // 获取文件id
      let fileId = res.body.id
      let data = {
        accessToken: getStore('accessToken'),
        id: fileId
      }
      let requestData = {
        requestData: JSON.stringify([data])

      }
      updateFileInfo(requestData).then(res => {
        console.log(res)
        this.initFileData()
      })
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      })
      this.dialogFileUploadVisible = false
    },

    /**
     * 文件上传失败时的钩子
     */
    fileUpError(err, file, fileList) {
      console.log('文件上传失败', err)
      this.$notify.error({
        title: '错误',
        message: `文件上传失败`
      })
    },

    /**
     * 点击上传按钮时操作
     */
    fileUpload() {
      this.$refs.dataFormFile.submit()

    },
    initFileData() {
      let data = {
        fileName: this.searchFileName,
        accessToken: getStore('accessToken')
      }
      let requestData = {
        requestData: JSON.stringify([data])
      }
      getFileList(requestData).then(resp => {
        if (resp.body.responseData.status === 0) {
          this.listData = resp.body.responseData.body
        }
      })
      //获取文件列表
    },
    downLoad(param) {
      let id = param.id;
      getFieDownloadUrl(id).then(resp => {
        let url = resp.body;
        window.location.href = url;

      })
    },
    deleteUserFile(param) {
      let fileId = param.id
      let data = {
        id: fileId,
        accessToken: getStore('accessToken')
      }
      let requestData = {
        requestData: JSON.stringify([data])
      }
      let _this = this;
      deleteFile(requestData).then(resp => {
        if (resp.body.responseData.status === 0) {
          _this.initFileData()
        } else {
          this.$notify.error({
            title: '错误',
            message: `删除文件失败`
          })
        }
      })
    }
  },

}

</script>
